<template>
  <div class="home">
    <!-- 搜索 -->
    <div class="top-serach">
      <van-search
        show-action
        v-model="value"
        placeholder="请输入小区或地址"
        background="#ffffff00"
      >
        <template #label>
          <div>
            <i @click="$router.push('/city')">上海</i
            ><van-icon name="arrow-down" />|
          </div>
        </template>
        <template #action>
          <van-icon
            name="location-o"
            size="7vw"
            @click="$router.push('/map')"
          ></van-icon> </template
      ></van-search>
    </div>
    <!-- swipe -->
    <van-swipe :autoplay="4000" class="my-swipe">
      <van-swipe-item v-for="item in images" :key="item.id">
        <img v-lazy="'http://liufusong.top:8080' + item.imgSrc" />
      </van-swipe-item>
    </van-swipe>
    <!-- 导航 -->
    <van-grid clickable :column-num="4" :border="false">
      <van-grid-item icon="home-o" text="整租" to="/" />
      <van-grid-item icon="friends-o" text="合租" url="/vant/mobile.html" />
      <van-grid-item
        icon="location-o"
        text="地图找房"
        url="/vant/mobile.html"
      />
      <van-grid-item icon="wap-home-o" text="去出租" url="/vant/mobile.html" />
    </van-grid>
    <!-- 其他 -->
    <div class="group">
      <h3 class="group-title">
        租房小组
        <span class="more">更多</span>
      </h3>
      <van-grid direction="horizontal" :column-num="2" :gutter="8">
        <van-grid-item
          class="item"
          v-for="item in home_group"
          :key="item.id"
          :icon="'http://liufusong.top:8080' + item.imgSrc"
        >
          <template #text>
            <p>{{ item.desc }}<br />{{ item.title }}</p>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getImgs, getHomeGroup } from '@/api/index'
export default {
  name: 'index-page',
  data() {
    return {
      value: '',
      images: [],
      home_group: []
    }
  },
  async created() {
    const res = await getImgs()
    this.images = res.body
    const { body } = await getHomeGroup()
    this.home_group = body
  }
}
</script>

<style lang="less" scoped>
.home {
  .top-serach {
    position: absolute;
    top: 20px;
    width: 100%;
    z-index: 5;
  }
  .my-swipe .van-swipe-item {
    height: 212px;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  .group {
    background-color: #f6f5f6;
    overflow: hidden;
    padding: 0 10px;
    .group-title {
      position: relative;
      margin: 15px 0px 15px 10px;
      font-size: 15px;
      .more {
        color: #787d82;
        position: absolute;
        right: 0;
        font-size: 14px;
        font-weight: normal;
      }
    }
  }
}
</style>
